export default function Trance() {
  return (
    <>
      <div className="grid grid-cols-5 gap-4 ml-12 mr-12">
        <div>hover属性改变</div>
        <div className="contain m-6 bg-red-300 w-24 h-12 transform hover:scale-110"></div>
        <div className=" m-6 bg-red-300 w-24 h-12 transform hover:bg-blue-300"></div>
        <div className=" m-6 bg-red-300 w-24 h-12 transform hover:bg-opacity-50"></div>
        <div className=" m-6 bg-red-300 w-24 h-12 transform hover:shadow-2xl"></div>
        <div>属性过渡</div>
        <div className=" m-6 bg-green-300 w-24 h-12  duration-100 transition-all hover:shadow-2xl hover:bg-blue-300"></div>
        <div className=" m-6 bg-green-300 w-24 h-12  duration-1000 transition-color hover:shadow-2xl hover:bg-blue-300"></div>
        <div className=" m-6 bg-green-300 w-24 h-12  duration-1000 transition-shadow hover:shadow-2xl hover:bg-blue-300"></div>
        <div className=" m-6 bg-green-300 w-24 h-12  duration-1000 transition-none hover:shadow-2xl hover:bg-blue-300"></div>
        <div>过渡延迟及计时函数</div>
        <div className=" m-6 bg-yellow-300 w-24 h-12 ease-out transform duration-1000 transition-all hover:shadow-2xl hover:bg-blue-300 hover:scale-90"></div>
        <div className=" m-6 bg-yellow-300 w-24 h-12 ease-in transform duration-1000 transition-all hover:shadow-2xl hover:bg-blue-300 hover:scale-90"></div>
        <div className=" m-6 bg-yellow-300 w-24 h-12 delay-1000 transform duration-1000 transition-all hover:shadow-2xl hover:bg-blue-300 hover:scale-90"></div>
        <div className=" m-6 bg-yellow-300 w-24 h-12 delay-100 transform duration-1000 transition-all hover:shadow-2xl hover:bg-blue-300 hover:scale-90"></div>
        <div>动画效果</div>
        <div className=" m-6 bg-blue-300 w-24 h-12 animate-spin"></div>
        <div className=" m-6 bg-blue-300 w-24 h-12 animate-ping"></div>
        <div className=" m-6 bg-blue-300 w-24 h-12 animate-pulse"></div>
        <div className=" m-6 bg-blue-300 w-24 h-12 animate-bounce"></div>
        <div>变换原点及各种变换效果</div>
        <div className=" m-6 bg-gray-300 w-24 h-12">
          <div className="bg-purple-300 w-24 h-12 transform origin-center rotate-90"></div>
        </div>
        <div className=" m-6 bg-gray-300 w-24 h-12">
          <div className="bg-purple-300 w-24 h-12 transform origin-top-left scale-50"></div>
        </div>
        <div className=" m-6 bg-gray-300 w-24 h-12">
          <div className="bg-purple-300 w-24 h-12 transform translate-x-2"></div>
        </div>
        <div className=" m-6 bg-gray-300 w-24 h-12">
          <div className="bg-purple-300 w-24 h-12 transform origin-top skew-y-12"></div>
        </div>
        {/* <div className=" m-6 bg-purple-300 w-24 h-12"></div>
        <div className=" m-6 bg-purple-300 w-24 h-12"></div>
        <div className=" m-6 bg-purple-300 w-24 h-12"></div>
        <div className=" m-6 bg-purple-300 w-24 h-12"></div>
        <div className=" m-6 bg-purple-300 w-24 h-12"></div> */}
      </div>
    </>
  )
}